<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>响应式模板</title>
<meta content="" name="Keywords">
<meta content="" name="Description">
<meta name="format-detection" content="telephone=no">
<link href="/static/css/ui.css" rel="stylesheet">
<link href="/static/css/grid.css" rel="stylesheet">
<link href="/web/css/style.css" rel="stylesheet">
<style>
* { box-sizing:border-box; }
.mb10 { margin-bottom:10px; }
.sub_channel{position: relative; background: #f6f6f6; /*margin-bottom: 20px;*/
height: 52px;line-height: 52px;padding:0 1em;top:-1px;margin-top:20px;}
.sub_channel a{display: inline-block;margin:0 1em;}
.sub_channel a:hover,.sub_channel .cur{color:#1b97e9;}
.sub_channel ._action{position: absolute;right: 1em;top:0;}
.sub_channel ._action .btn{padding-left: 4px;padding-right: 4px;min-width:2em;}
.sub_channel ._action .ion{font-size:1.5em;color:#999;}
.sub_channel ._action .cur .ion{color:#1b97e9;}

.cn_search { width:226px; height:30px; border:#dbdbdb 1px solid; position:relative; padding-right:34px; background-color:#fff; box-sizing:content-box; line-height:0;}
.cn_search_inp { width:100%; height:30px; line-height:30px; padding:0 10px; border:0;}
.cn_search_btn { border:1px solid #ddd; border-width:0 0 0 1px; width:34px; height:30px; position:absolute; right:0; top:0; padding:0; /* font:0/0 a; letter-spacing:-9px; */ cursor:pointer;}
.cn_search_btn:hover{ background-color:#039be5; background-position:6px -18px;}
.sub_channel .cn_search { position:absolute; right:10px; top:10px; }

/*通用表格div begin*/
.newTable { clear:both; line-height:40px; text-align:center;}
.newTable li { min-height:40px; float:left; padding:0 15px; border-right:#eaeaea 1px solid; white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.newTable li:last-child,.newTable li.last { border-right-width:0;}
.newTable ._bd ul:nth-child(even),.newTable ._bd ul.even { background-color:#f6f6f6; }
.newTable ._bd ul:hover { /* background-color:#ddd; */ }
.newTable ._hd { background-color:#b9b9b9; color:#fff;}
.newTable .dLink { margin:0 5px; }
.newTable .dLink:hover { filter:alpha(opacity=80); opacity:0.8; }
.tb1 { width:40%;}
.tb2 { width:24%; }
.tb3 { width:12%; }
.tb4 { width:12%; }
.tb5 { width:12%; }
.tb6 { width:24%; }
.tb7 { width:10%; }
.newTable li.tl { text-align:left; }
.newTable li.nopadd { padding-left:0; padding-right:0; }
/*通用表格div end*/

</style>
</head>
<body>

<div style="font-size:18px;">
说明要求：使用vuejs来将如下静态页面进行编译<br>
参数:<br>
rec_flag:<br>
0:全部<br>
1:已上架<br>
2:已下架<br><br>
地址：/index.php/api/V1/Course/lists?rec_flag=2&kcmc=&p=1&pagesize=20  <br><br><br><br>

1、全部、已上架、已下架的请求；<br>
2、课程搜索；参数:kcmc  <br>
3、课程列表渲染    <br><br>
相关文件：<br>
json数据：/test/test4.json <br>
js文件：/web/js/test1.js
</div>

<div class="class_box" id="myapp" style="width:900px; margin:20px auto;" v-cloak>
    <div class="fix">
        <div class="sub_channel fix gray_bg mb10">
            <a v-on:click="change_flag(0)" href="javascript:void(0);" v-bind:class="{'cur':map.rec_flag === 0}">全部</a>
            <a v-on:click="change_flag(1)" href="javascript:void(0);" v-bind:class="{'cur':map.rec_flag === 1}">已上架</a>
            <a v-on:click="change_flag(2)" href="javascript:void(0);" v-bind:class="{'cur':map.rec_flag === 2}">已下架</a>
            <div class="cn_search">
                <form onsubmit="return false;">
                    <input type="text" placeholder="请输入课程名称" class="cn_search_inp" v-model.trim="map.kcmc">
                    <button type="submit" class="cn_search_btn" v-on:click="submitDate">提交</button>
                </form>
            </div>
        </div>
        <div class="newTable" style="display: block;">
            <ul class="_hd fix">
                <li class="tb1 tl">课程名称</li>
                <li class="tb2">授课老师</li>
                <li class="tb3">状态</li>
                <li class="tb4">更新时间</li>
                <li class="tb5">已开班组</li>
            </ul>
            <div class="_bd fix">
                <ul class="list fix" v-for="v in data">
                    <li class="tb1 tl"><a v-bind:href="'/index.php/index/Course/index?kcid='+v.kcid" target="_blank" v-bind:title="v.kcmc">{{v.kcmc}}</a></li>
                    <li v-bind:title="teacherList(v.zjls)" class="tb2">{{teacherList(v.zjls)}}</li>
                    <li class="tb3">
                        <template v-if="v.rec_flag == 0">已上架</template>
                        <template v-if="v.rec_flag == 2">已下架</template>
                    </li>
                    <li class="tb4 nopadd">{{v.update_time | time}}</li>
                    <li class="tb5">
                        <template v-if="v.cg_count == 0">无</template>
                        <template v-else>{{v.cg_count}}</template>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>



<script src="/static/modules/seajs/sea.js" id="seajsnode" ></script>
<script src="/web/seajs.config.js"></script>
<script>seajs.use('js/test1');</script>
</body>
</html>